import React from 'react';
import {connect} from 'dva';
import {Button, Col, Form, Input, Popconfirm, Row, Table} from 'antd';
import Constants from '../../../utils/Constants';
import RightConstants from '../../../utils/RightConstants';
import RightBox from '../../../components/commons/RightBox';
import LogisticsOrderDetail from '../../../components/logistics/order/LogisticsOrderDetail';
import OperatorConstant from "../../../utils/OperatorConstant";
import LgPortSelect from '../../../components/logistics/LgPortSelect';
import { DatePicker } from 'antd/lib/index';
const {RangePicker} = DatePicker;
const FormItem = Form.Item;
const dateFormat = "YYYY-MM-DD";


const logisticsOrder = Form.create()(class LogisticsOrder extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'logisticsOrder/getListForPage', payload: { page: Constants.DEFAULT_PAGE } });
    }

    handleOpen = (id, disabled, type) => {
        this.props.dispatch({
            type: 'logisticsOrder/getById',
            payload: { id }
        });

        this.logisticsOrderDetail.handleOpen(disabled, type);

    }


    handleDelete = id => {
        this.props.dispatch({
            type: 'logisticsOrder/deleteById',
            payload: {
                id,
                onSuccess: this.handleSearch
            }
        })
    }

    handleSearch = flag => {
        let newPage = this.props.logisticsOrder.page;
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'logisticsOrder/getListForPage',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    columns = [
        { title: '物流订单编号', dataIndex: 'orderNo', key: 'orderNo'},
        { title: '出口订单编号', dataIndex: 'ieOrderno', key: 'ieOrderno'},
        { title: '外商名称', dataIndex: 'companyname', key: 'companyname'},
        { title: '起始港', dataIndex: 'loadingPortName', key: 'loadingPortName'},
        { title: '目的港', dataIndex: 'destinationPortName', key: 'destinationPortName'},
        { title: '收货人', dataIndex: 'consignee', key: 'consignee'},
        { title: '柜号', dataIndex: 'cntrNo', key: 'cntrNo'},
        { title: '创建时间', dataIndex: 'createtime', key: 'createtime'},
        { title: '创建人', dataIndex: 'creatorName', key: 'creatorName'},
        {
            title: '操作',
            render: (record) => {
                let editLink = <RightBox resource={RightConstants.LOGISTICS_ORDER.LOGISTICS_ORDER_EDIT} split={true}><a href="#" onClick={this.handleOpen.bind(this, record.id, false, OperatorConstant.edit)}>编辑</a></RightBox>
                let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id)} okText="是" cancelText="否"
                                             placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                    <a href="#">删除</a>
                </Popconfirm>
                deleteLink = <RightBox resource={RightConstants.LOGISTICS_ORDER.LOGISTICS_ORDER_DELETE} split={true}>{deleteLink}</RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true, OperatorConstant.view)}>查看</a>
                return <span>{editLink}{viewLink}</span>
            }
        }
    ];

    render(){
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.logisticsOrder.page.size,
            current: this.props.logisticsOrder.page.page,
            total: this.props.logisticsOrder.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                portType:undefined;
                let newPage = this.props.logisticsOrder.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'logisticsOrder/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.logisticsOrder.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'logisticsOrder/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'供应商名称'}>
                            {getFieldDecorator('supplierName')
                            (
                                <Input maxLength="20" placeholder="可根据供应商名称搜索" />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'物流订单编码'}>
                            {getFieldDecorator('orderNo')
                            (
                                <Input maxLength="20" placeholder="可根据物流订单编码搜索" />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'合同编码'}>
                            {getFieldDecorator('contractNo')
                            (
                                <Input maxLength="20" placeholder="可根据合同编码搜索" />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'进出口订单编码'}>
                            {getFieldDecorator('ieOrderNo')
                            (
                                <Input maxLength="20" placeholder="可根据进出口订单编码搜索" />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'起始港'}>
                            {getFieldDecorator('loadingPort')
                            (
                                <LgPortSelect style={{ width: '100%'}} allowClear />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'目的港'}>
                            {getFieldDecorator('destinationPort')
                            (
                                <LgPortSelect style={{ width: '100%'}} allowClear />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={7}>
                        <FormItem span={7} {...formItemLayout} label="下单时间">
                            {getFieldDecorator("timeRange", {
                                initialValue: null,
                            })(
                                <RangePicker
                                    style={{width: '100%'}}
                                    showTime={{format: 'YYYY-MM-DD'}}
                                    format="YYYY-MM-DD"
                                    placeholder={['开始时间', '结束时间']}
                                />
                            )
                            }
                        </FormItem>
                    </Col>
                    <Col span={9} style={{ marginLeft: 100 }}>
                        <Button  type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, true)} size={'default'}>查询</Button>
                    </Col>
                </Row>


                <Table loading={this.props.loading} rowKey='id' dataSource={this.props.logisticsOrder.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
                <LogisticsOrderDetail wrappedComponentRef={(inst) => this.logisticsOrderDetail = inst} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.logisticsOrder, logisticsOrder: state.logisticsOrder,
        logisticsSupplier : state.logisticsSupplier,
        // app : state.app
    };
}

export default connect(mapStateToProps)(logisticsOrder);
